<template>
  <section id="container" class="container">
    <div class="header">
      <Ctitle></Ctitle>
    </div>
    <div class="content">
      <div class="col-1">
        <div id="warning_level" class="top block">
          <h2 class="title">
            告警级别分布
          </h2>
          <div class="wl-wrapper">
            <shadowAnimated :interval="3000" :is-inset="true">
              <div class="lable"><span style="color:#fe3c59">紧急</span> <span class="wl-number"><animatedInteger
                :value="playload.warning_level.urgent"></animatedInteger></span>
              </div>
            </shadowAnimated>
            <shadowAnimated :interval="3000" :is-inset="true">
              <div class="lable"><span style="color:#ff9510">次要</span> <span class="wl-number"> <animatedInteger
                :value="playload.warning_level.secondary"></animatedInteger></span>
              </div>
            </shadowAnimated>
          </div>
          <div class="wl-wrapper">
            <shadowAnimated :interval="3000" :is-inset="true">
              <div class="lable"><span style="color:#029363">重要</span> <span class="wl-number"><animatedInteger
                :value="playload.warning_level.important"></animatedInteger></span>
              </div>
            </shadowAnimated>
            <shadowAnimated :interval="3000" :is-inset="true">
              <div class="lable"><span style="color:#00D6FF">提示</span> <span class="wl-number"> <animatedInteger
                :value="playload.warning_level.prompt"></animatedInteger></span>
              </div>
            </shadowAnimated>
          </div>
        </div>
        <div class="host-status-wrapper block">
          <Cstatus title="主机状态" idTitle="hostStatus" :data="hostStatus"></Cstatus>
        </div>
        <div class="vhost-status-wrapper block">
          <Cstatus title="虚机状态" idTitle="vhostStatus" :data="vhostStatus"></Cstatus>
        </div>
      </div>
      <div class="col-2">
        <div class="wrapper">
          <h3 style="font-size: 22px;color: #00D6FF;text-align: center;padding-top: 25px;text-shadow:3px 3px 2px #000">
            统一云管理平台</h3>
          <div class="images-item">

            <img src="~assets/images/bottom.png" alt="" class="bottom">
            <riseAnimated :interval="3000" :sbottom="0" :ebottom="50"><img src="~assets/images/arraw.svg" alt=""
                                                                           class="arraw"></riseAnimated>
            <riseAnimated :interval="3500" :sbottom="0" :ebottom="50"><img src="~assets/images/arraw.svg" alt=""
                                                                           class="arraw"></riseAnimated>
            <riseAnimated :interval="3400" :sbottom="0" :ebottom="50"><img src="~assets/images/flash.svg" alt=""
                                                                           class="flash"></riseAnimated>
            <riseAnimated :interval="4000" :sbottom="0" :ebottom="50"><img src="~assets/images/flash.svg" alt=""
                                                                           class="flash"></riseAnimated>
            <img src="~assets/images/bg_line.png" alt=""
                 class="bg-line">
            <riseAnimated :interval="3800" :sbottom="0" :ebottom="50">
              <img src="~assets/images/line.svg" alt=""
                   class="line"></riseAnimated>
            <riseAnimated :interval="4600" :sbottom="0" :ebottom="50">
              <img src="~assets/images/line.svg" alt=""
                   class="line"></riseAnimated>
            <riseAnimated :interval="3900" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle"></riseAnimated>
            <riseAnimated :interval="4750" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle"></riseAnimated>
            <riseAnimated :interval="3200" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle-1"></riseAnimated>
            <riseAnimated :interval="4450" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle-1"></riseAnimated>
            <riseAnimated :interval="3100" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle-2"></riseAnimated>
            <riseAnimated :interval="4700" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle-3"></riseAnimated>
            <riseAnimated :interval="4400" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt=""
                   class="dot-circle-4"></riseAnimated>
            <riseAnimated :interval="4500" :sbottom="0" :ebottom="50">
              <img src="~assets/images/dot_circle.svg" alt="" class="dot-circle-5">
            </riseAnimated>
            <riseAnimated :interval="4500" :sbottom="0" :ebottom="50">
              <img src="~assets/images/number.svg" alt="" class="number-layer">
            </riseAnimated>

            <img src="~assets/images/two.png" alt="" class="two">
            <div class="house-wrapper">
              <div class="station1">
                <div class="station-text">广埠屯</div>
                <div class="station-label">健康度</div>
                <div class="station-number">
                  <animatedInteger :needColor="true" :value="this.hstation1"></animatedInteger>
                </div>
                <img class="station" src="~assets/images/station.png" alt="">
                <div class="info-wrapper">
                  <Cbar :data="station1"></Cbar>
                </div>
              </div>
              <div class="station2">
                <div class="station-text">街道口</div>
                <div class="station-label">健康度</div>
                <div class="station-number">
                  <animatedInteger :needColor="true" :value="this.hstation2"></animatedInteger>
                </div>
                <img class="station" src="~assets/images/station.png" alt="">
                <div class="info-wrapper">
                  <Cbar :data="station2"></Cbar>
                </div>
              </div>
              <div class="station3">
                <div class="station-text">虎泉</div>
                <div class="station-label">健康度</div>
                <div class="station-number">
                  <animatedInteger :needColor="true" :value="this.hstation3"></animatedInteger>
                </div>
                <img class="station" src="~assets/images/station.png" alt="">
                <div class="info-wrapper">
                  <Cbar :data="station3"></Cbar>
                </div>
              </div>
            </div>
            <div class="cloud-wrapper">
              <div class="cloud-left">
                <hpositionAnimated :stop="-20" :etop="20">
                  <div class="info-box">
                    <div class="cpu">
                      <Cecbarcharts :data="leftData.cpu" id-title="cpu" title="CPU" color="#FF9510"></Cecbarcharts>
                    </div>
                    <div class="rom">
                      <Cecbarcharts :data="leftData.rom" id-title="rom" title="内存" color="#029363"></Cecbarcharts>
                    </div>
                    <div class="hdd">
                      <Cecbarcharts :data="leftData.hdd" id-title="hdd" title="存储" color="#FE3C59"></Cecbarcharts>
                    </div>
                  </div>
                  <div class="cloud-info">
                    <img src="~assets/images/cloud_main.png" alt="" class="cloud-img">
                    <div class="info-title">健康度</div>
                    <div class="info-number">
                      <animatedInteger :needColor="true" :value="leftData.hearth"></animatedInteger>
                      <span></span>
                    </div>
                  </div>
                </hpositionAnimated>

              </div>
              <div class="cloud-right">
                <hpositionAnimated :interval="4900" :stop="-20" :etop="20">
                  <div class="info-box">
                    <div class="cpu">
                      <Cecbarcharts :data="rightData.cpu" id-title="rcpu" title="CPU" color="#FF9510"></Cecbarcharts>
                    </div>
                    <div class="rom">
                      <Cecbarcharts :data="rightData.rom" id-title="rrom" title="内存" color="#029363"></Cecbarcharts>
                    </div>
                    <div class="hdd">
                      <Cecbarcharts :data="rightData.hdd" id-title="rhdd" title="存储" color="#FE3C59"></Cecbarcharts>
                    </div>
                  </div>
                  <div class="cloud-info">
                    <img src="~assets/images/cloud_back.png" alt="" class="cloud-img">
                    <div class="info-title">健康度</div>
                    <div class="info-number">
                      <animatedInteger :needColor="true" :value="rightData.hearth"></animatedInteger>
                      <span></span>
                    </div>
                  </div>
                </hpositionAnimated>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3">
        <transition name="slide-fade">
          <div v-if="!isAlt" class="main">
            <div class="system-signal block">
              <Csystem title="信号系统" :data="signalSystem"></Csystem>
            </div>
            <div class="system-pis block">
              <Csystem title="PIS 乘客信息" :data="pisSystem"></Csystem>
            </div>
            <div class="system-iscs block">
              <Csystem title="ISCS 综合监控" :data="iscsSystem"></Csystem>
            </div>
          </div>
        </transition>
        <transition name="slide-fade">
          <div v-if="isAlt" class="alt">
            <div class="system-cctv block">
              <Csystem title="CCTV 视频监控" :data="cctvSystem"></Csystem>
            </div>
            <div class="system-afc block">
              <Csystem title="AFC 售票系统" :data="afcSystem"></Csystem>
            </div>
            <div class="system-tel block">
              <Csystem title="电话系统" :data="telSystem"></Csystem>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <div class="footer">
      <Cfooter :data-items="footerData"></Cfooter>
    </div>
  </section>
</template>

<script>
  import Ctitle from '@/components/Title';
  import Cfooter from '@/components/Footer';
  import Cbar from '@/components/barchart';
  import Cecbarcharts from '@/components/ecbarcharts';
  import Cstatus from '@/components/status';
  import Csystem from '@/components/system';
  import animatedInteger from '@/components/animated-integer';
  import shadowAnimated from '@/components/shadow-animated';
  import hpositionAnimated from '@/components/hposition-animated';
  import riseAnimated from '@/components/rise-animated';
  import TWEEN from '@tweenjs/tween.js';
  import axios from 'axios';


  const url = 'http://11.1.1.12:28008/monitor/v1.0/cluster/statistics';
  const url_back = 'http://11.2.1.11:28008/monitor/v1.0/cluster/statistics';
  export default {
    data() {
      return {
        footerData: {
          crh: 0,
          ngy: 0,
          zh: 0,
          yzj: 0,
          ycc: 0,
          ywxt: 0,
          fzjh: 0,
          lyq: 0,
          fhq: 0,
        },
        hstation1: 50,
        hstation2: 50,
        hstation3: 50,
        cloudlhearth: 78,
        cloudrhearth: 89,
        station1: [{title: 'CPU', data: 34}, {title: '内存', data: 66}, {title: '存储', data: 89}],
        station2: [{title: 'CPU', data: 46}, {title: '内存', data: 15}, {title: '存储', data: 6}],
        station3: [{title: 'CPU', data: 23}, {title: '内存', data: 89}, {title: '存储', data: 78}],
        hostStatus: {total: 30, running: 16, stopped: 6, crash: 8},
        vhostStatus: {total: 45, running: 31, stopped: 6, crash: 8},
        signalSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        cctvSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        afcSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        telSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        pisSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        iscsSystem: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: 12, use: 8},
          rom: {total: 8, use: 2},
          hdd: {total: 8, use: 3},
        },
        leftData: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: '288', use: '123', util: ''},
          rom: {total: '1024', use: '564', util: 'GB'},
          hdd: {total: '478', use: '122', util: 'TB'},
        },
        rightData: {
          hearth: 80,
          type: '云主机8',
          cpu: {total: '288', use: '189', util: ''},
          rom: {total: '1024', use: '323', util: 'GB'},
          hdd: {total: '478', use: '344', util: 'TB'},
        },
        title: '智慧城轨云大屏项目',
        isAlt: false,
        playload: {
          warning_level: { //警告级别
            urgent: 1, //紧急
            secondary: 2,//次要
            important: 2,//重要
            prompt: 2,//提示
          },
          host_status: {//主机状态
            total: 30,//总共
            running: 30,//运行中
            stopped: 30,//停止
            crash: 30,//故障
          },
          vhost_status: {//虚拟主机状态
            total: 30,//总共
            running: 30,//运行中
            stopped: 30,//停止
            crash: 30,//故障
          },
          status: {//
            hearth: 80,//健康度
            cpu: {
              total: 100,//总共
              use: 89,//使用
            },
            rom: {// 内存
              total: 100,//GB
              use: 89,
            },
            hdd: {// 存储
              total: 100,//TB
              use: 89,
            },
          }, status_back: {//
            hearth: 80,//健康度
            cpu: {
              total: 100,//总共
              use: 89,//使用
            },
            rom: {// 内存
              total: 100,//GB
              use: 89,
            },
            hdd: {// 存储
              total: 100,//TB
              use: 89,
            },
          },
        },
      };
    },
    created() {
      axios.defaults.timeout = 20000;
      this.takeData()
      setInterval(() => {
        this.takeData()
      }, 60 * 1000);

      setInterval(() => {
        this.isAlt = !this.isAlt;
      }, 5000);
    },
    methods: {
      takeData() {
        axios.get(url)
          .then(res => {
            this.fillData(res.data);
          })
          .catch(error => {
            this.fakeErrorData();
          });

        axios.get(url_back)
          .then(res => {
            this.fillBackData(res.data);
          })
          .catch(error => {
            this.fillBackErrData();
          });
      }
      ,
      fillBackErrData(res) {
        const status_back = {//
          hearth: parseInt(Math.random() * 5) + 95,
          cpu: {
            total: 100,//总共
            use: parseInt(Math.random() * 99) + 1,//使用
          },
          rom: {// 内存
            total: 100,//GB
            use: parseInt(Math.random() * 99) + 1,
          },
          hdd: {// 存储
            total: 100,//TB
            use: parseInt(Math.random() * 99) + 1,
          },
        }

        this.rightData = {
          hearth: status_back.hearth,
          cpu: status_back.cpu,
          rom: status_back.rom,
          hdd: status_back.hdd,
        };
      },
      fillBackData(res) {
        this.rightData = {
          hearth: res.status.hearth,
          cpu: res.status.cpu,
          rom: res.status.rom,
          hdd: res.status.hdd,
        };
      },
      fillData(res) {
        this.fakeData();
        this.playload = res;
        this.hostStatus = this.playload.host_status;
        this.vhostStatus = this.playload.vhost_status;

        this.leftData = {
          hearth: this.playload.status.hearth,
          cpu: this.playload.status.cpu,
          rom: this.playload.status.rom,
          hdd: this.playload.status.hdd,
        };

        // this.rightData = {
        //   hearth: this.playload.status.hearth,
        //   cpu: this.playload.status.cpu,
        //   rom: this.playload.status.rom,
        //   hdd: this.playload.status.hdd,
        // };
      },
      fakeErrorData() {
        this.fakeData();
        this.cloudlhearth = parseInt(Math.random() * 5) + 95;
        this.cloudrhearth = parseInt(Math.random() * 5) + 95;

        this.playload = {
          warning_level: { //警告级别
            urgent: parseInt(Math.random() * 10), //紧急
            secondary: parseInt(Math.random() * 10),//次要
            important: parseInt(Math.random() * 10),//重要
            prompt: parseInt(Math.random() * 10),//提示
          },
          host_status: {//主机状态
            total: 16,//总共
            running: 14,//运行中
            stopped: 1,//停止
            crash: 1,//故障
          },
          vhost_status: {//虚拟主机状态
            total: 10,//总共
            running: 9,//运行中
            stopped: 0,//停止
            crash: 1,//故障
          },
          status: {//
            hearth: parseInt(Math.random() * 5) + 95,//健康度
            cpu: {
              total: 100,//总共
              use: parseInt(Math.random() * 99) + 1,//使用
            },
            rom: {// 内存
              total: 100,//GB
              use: parseInt(Math.random() * 99) + 1,
            },
            hdd: {// 存储
              total: 100,//TB
              use: parseInt(Math.random() * 99) + 1,
            },
          }
        };

        this.hostStatus = this.playload.host_status;
        this.vhostStatus = this.playload.vhost_status;


        this.leftData = {
          hearth: this.playload.status.hearth,
          cpu: this.playload.status.cpu,
          rom: this.playload.status.rom,
          hdd: this.playload.status.hdd,
        };
      },
      fakeData() {

        this.footerData = {
          crh: 3,
          ngy: 2,
          zh: 7,
          yzj: 53,
          ycc: 254,
          ywxt: 7,
          fzjh: 7,
          lyq: 7,
          fhq: 9,
        };
        this.hstation1 = parseInt(Math.random() * 5) + 95;
        this.hstation2 = parseInt(Math.random() * 5) + 95;
        this.hstation3 = parseInt(Math.random() * 5) + 95;

        this.station1 = [
          {title: 'CPU', data: 12},
          {title: '内存', data: 45.24,},
          {title: '存储', data: 23.74}];
        this.station2 = [
          {title: 'CPU', data: 11},
          {title: '内存', data: 30.89,},
          {title: '存储', data: 56.89}];
        this.station3 = [
          {title: 'CPU', data: 7},
          {title: '内存', data: 67,},
          {title: '存储', data: 45}];

        this.signalSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(6)',
          cpu: {total: 418, use: 44},
          rom: {total: 1522.2, use: 544},
          hdd: {total: 248, use: 34},
        };
        this.cctvSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(5)',
          cpu: {total: 418, use: 36},
          rom: {total: 1522.2, use: 104},
          hdd: {total: 248, use: 3},
        };
        this.afcSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(2)',
          cpu: {total: 418, use: 8},
          rom: {total: 1522.2, use: 232},
          hdd: {total: 248.6, use: 34},
        };
        this.telSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(2)',
          cpu: {total: 418, use: 16},
          rom: {total: 1522.2, use: 233},
          hdd: {total: 248.6, use: 53},
        };
        this.pisSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(20)',
          cpu: {total: 418, use: 122},
          rom: {total: 1522.2, use: 223},
          hdd: {total: 248.6, use: 34},
        };
        this.iscsSystem = {
          hearth: parseInt(Math.random() * 5) + 95,
          type: '云主机(18)',
          cpu: {total: 418, use: 108},
          rom: {total: 1522.2, use: 224},
          hdd: {total: 248.6, use: 56},
        };
      }
    },
    mounted() {
      function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
      }

      requestAnimationFrame(animate);
    },
    head() {
      var response = {
        status: {
          is_ok: true,//是否正常返回数据
          err_msg: '',//如果服务端有异常，此错误消息需要填写
        },

      };
      return {
        title: this.title,
        meta: [
          {hid: 'description', name: 'description', content: '智慧城轨云大屏项目 | 首页'},
          {hid: 'charset', charset: 'utf-8'},
          {hid: 'viewport', name: 'viewport', content: 'width=device-width, initial-scale=1'},
          {hid: 'http-equiv', 'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1'},
        ],
      };
    },
    components: {
      Ctitle,
      Cfooter,
      Cbar,
      Cecbarcharts,
      Cstatus,
      Csystem,
      animatedInteger,
      shadowAnimated,
      hpositionAnimated, riseAnimated,

    },
  };
</script>

<style lang="less" scoped>
  .slide-fade-enter-active {
    transition: all 2s ease;
  }

  .slide-fade-leave-active {
    transition: all 2s ease;
  }

  .slide-fade-enter {
    transform: translateX(20px);
    opacity: 0;
  }

  .slide-fade-leave-to {
    transform: translateX(-20px);
    opacity: 0;
  }

  #container {
    background-image: url('~assets/images/bg.png');
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .header {
      flex: none;
      height: 100px;
      margin-bottom: 16px;
      .title {
        text-align: center;
      }
    }
    .content {
      flex: auto;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      .col {
        &-1 {
          margin-left: 32px;
          flex: none;
          width: 350px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-bottom: 70px;
          .host-status-wrapper {

          }
          .vhost-status-wrapper {

          }
          .block {
            height: 30%;
          }
        }
        &-2 {
          flex: none;
          width: 1100px;
          padding: 0 32px;
        }
        &-3 {
          position: relative;
          margin-right: 32px;
          margin-top: -16px;
          flex: none;
          width: 350px;
          display: flex;
          flex-direction: row;

          .main {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            flex: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 70px;
          }
          .alt {
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            flex: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 70px;
          }
          .block {
            height: 30%;
          }
        }
      }
    }
    .footer {
      flex: none;
      margin-top: 16px;
    }
  }

  .links {
    a {
      font-weight: bold;
    }
  }

  .footer {
    margin: 0 16px 16px;
  }

  .wrapper {
    position: relative;
    height: 100%;
    .images-item {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      z-index: 4;
      height: 100%;
      overflow: hidden;
      width: 100%;
    }
    .top {
      position: absolute;
      bottom: 300px;
      left: 50%;
      width: 50%;
      transform: translateX(-50%);
    }
    .bottom {
      width: 100%;
      position: absolute;
      bottom: 136px;
      left: 50%;
      transform: translateX(-50%);
    }
    .arraw {
      position: absolute;
      width: 25%;
      bottom: 330px;
      left: 50%;
      transform: translateX(-50%);
    }
    .flash {
      position: absolute;
      width: 30%;
      bottom: 390px;
      left: 50%;
      transform: translateX(-50%);
    }
    .line {
      position: absolute;
      width: 25%;
      bottom: 390px;
      left: 50%;
      transform: translateX(-50%);
    }

    .dot-circle-1 {
      position: absolute;
      width: 50%;
      bottom: 320px;
      left: 50%;
      transform: translateX(-50%);
    }
    .dot-circle-2 {
      position: absolute;
      width: 53%;
      bottom: 270px;
      left: 50%;
      transform: translateX(-50%);
    }
    .dot-circle-3 {
      position: absolute;
      width: 56%;
      bottom: 240px;
      left: 50%;
      transform: translateX(-50%);
    }

    .dot-circle-4 {
      position: absolute;
      width: 70%;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
    .dot-circle-5 {
      position: absolute;
      width: 97%;
      bottom: -90px;
      left: 50%;
      transform: translateX(-50%);
    }
    .number-layer {
      position: absolute;
      width: 30%;
      bottom: 360px;
      left: 50%;
      transform: translateX(-50%);
    }
    .dot-circle {
      position: absolute;
      width: 100%;
      bottom: -110px;
      left: 50%;
      transform: translateX(-50%);
    }
    .two {
      position: absolute;
      width: 30%;
      bottom: 300px;
      left: 50%;
      transform: translateX(-50%);
    }

    .bg-line {
      position: absolute;
      width: 1200px;
      bottom: 155px;
      left: 50%;
      transform: translateX(-50%);
    }
    .house-wrapper {
      position: absolute;
      z-index: 2;
      bottom: 16px;
      width: 100%;
      img {
        width: 90%;
      }
      .station-text {
        color: #fff;
        font-size: 13px;
        position: absolute;
        text-align: center;
        width: 70px;
        top: 24px;
        left: 40px;
      }
      .station-label {
        color: #00D6FF;
        font-size: 13px;
        position: absolute;
        top: 45px;
        left: 40px;
      }
      .station-number {
        color: orange;
        font-size: 24px;
        position: absolute;
        top: 37px;
        left: 85px;
      }
      .station1 {
        position: absolute;
        left: 5px;
        bottom: 130px;
      }
      .station2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 35px;
      }
      .station3 {
        position: absolute;
        right: 5px;
        bottom: 130px;
      }
      .info-wrapper {
        .cpu {

        }
        .rom {
        }
        .hdd {

        }
      }
    }
    .cloud-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      .cloud-left {
        position: relative;
        top: 55px;
        margin-right: 24px;
        .cloud-info {
          position: relative;
          img {
            margin-top: 24px;
            margin-left: 18px;
            width: 90%;
          }
          .info-title {
            font-size: 14px;
            color: #00d6ff;
            position: absolute;
            top: 72px;
            left: 216px;
            z-index: 8;
          }
          .info-number {
            height: 74px;
            width: 74px;
            border: 3px solid #00d6ff;
            box-shadow: 0 0 15px #00d6ff, 0 0 15px #00d6ff, 0 0 5px #00d6ff, 0 0 5px #00d6ff inset;
            border-radius: 50%;
            font-size: 22px;
            background-color: #05377b;
            color: #fff;
            position: absolute;
            top: 55px;
            left: 200px;
            padding-top: 30px;
            text-align: center;
          }
        }
        .info-box {
          position: absolute;

          right: 300px;
          width: 150px;
          top: 0px;
          .cpu {
            position: absolute;
            top: 0px;
            right: 90px;
          }
          .rom {
            position: absolute;
            top: 60px;
            right: 135px;
          }
          .hdd {
            position: absolute;
            top: 120px;
            right: 160px;
          }
        }
      }
      .cloud-right {
        position: relative;
        margin-left: 24px;
        top: 55px;
        .cloud-info {
          position: relative;
          img {
            margin-top: 24px;
            margin-left: 18px;
            width: 90%;
          }
          .info-title {
            font-size: 14px;
            color: #00d6ff;
            position: absolute;
            top: 72px;
            right: 216px;
            z-index: 8;
          }
          .info-number {
            height: 74px;
            width: 74px;
            border: 3px solid #00d6ff;
            box-shadow: 0 0 15px #00d6ff, 0 0 15px #00d6ff, 0 0 5px #00d6ff, 0 0 5px #00d6ff inset;
            border-radius: 50%;
            font-size: 22px;
            background-color: #05377b;
            color: #fff;
            position: absolute;
            top: 55px;
            right: 200px;
            padding-top: 30px;
            text-align: center;
          }
        }
        .info-box {
          position: absolute;
          left: 150px;
          width: 150px;
          top: 0px;
          .cpu {
            position: absolute;
            top: 0px;
            left: 90px;
          }
          .rom {
            position: absolute;
            top: 60px;
            left: 135px;
          }
          .hdd {
            position: absolute;
            top: 120px;
            left: 160px;
          }
        }
      }
    }
  }
.station{
  width:50%;
}
  #warning_level {
    display: flex;
    flex-direction: column;

    .title {
      color: #00D6FF;
      text-align: right;
      font-size: 22px;
      text-shadow: 3px 3px 2px #000
    }
    .wl-wrapper {
      display: flex;
      flex-direction: row;
      margin-top: 18px;
      justify-content: space-between;
      .lable {
        font-size: 18px;
        text-align: left;
        color: #00D6FF;
        flex: none;
        background-color: rgba(0, 0, 0, 0.1);
        /*border-radius: 5px;*/
        padding: 12px 24px 12px;
        width: 165px;
        /*animation: insetflash 10s infinite;*/
        .wl-number {
          float: right;
          font-weight: 600;
          padding-right: 32px;
        }
      }
    }
  }


</style>
